<script setup lang="ts">
import appStore from '@/store/modules/app'

const useAppStore = appStore()

function scrollToModule(key: any) {
  const ref = document.querySelector(`[data-floor="${key}"]`)
  if (ref) {
    ref.scrollIntoView({
      behavior: 'smooth',
    })
  }
  else {
    document.documentElement.scrollTop = 0
  }
}

watch(() => useAppStore.currentFloor, (to) => {
  if (to) {
    scrollToModule(to)
  }
})

onMounted(() => {
  const to = useAppStore.currentFloor
  scrollToModule(to)
})
</script>

<template>
  <div>
    <div class="box">
      Hi, i'm index page
    </div>

    <div id="company" class="box" data-floor="company">
      company
    </div>
    <!--
    <div id="case" class="box" data-floor="case">
      case
    </div>

    <div id="case2" class="box" data-floor="products">
      products
    </div>

    <div id="case2" class="box" data-floor="service">
      service
    </div>

    <div id="case2" class="box" data-floor="customer">
      合作客户
    </div>

    <div id="case2" class="box" data-floor="business">
      商务合作
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.box {
  height: 250px;
  margin-bottom: 10px;
  background-color: #ccc;
  scroll-margin: 10vh;
}
</style>
